<script>
  import { Layout } from "@budibase/bbui"
  import { authStore, appStore, screenStore, componentStore } from "@/stores"
  import DevToolsStat from "./DevToolsStat.svelte"
</script>

<Layout noPadding gap="XS">
  <DevToolsStat label="squares-four" value={$appStore.application?.name} />
  <DevToolsStat label="Tenant" value={$appStore.application?.tenantId} />
  <DevToolsStat label="Version" value={$appStore.application?.version} />
  {#if $appStore.clientLoadTime}
    <DevToolsStat
      label="Client load time"
      value={`${$appStore.clientLoadTime} ms`}
    />
  {/if}
  <DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} />
  <DevToolsStat
    label="Active screen"
    value={$screenStore.activeScreen?.routing.route}
  />
  <DevToolsStat
    label="Components"
    value={$componentStore.mountedComponentCount}
  />
  <DevToolsStat label="user" value={$authStore?.email} />
  <DevToolsStat label="Role" value={$authStore?.roleId} />
</Layout>
